<template>
	<div>
		<a-collapse default-active-key="1" :bordered="false">
			<template #expandIcon="props">
                <caret-right-outlined :rotate="props.isActive ? 90 : 0"/>
			</template>
			<a-collapse-panel key="1" :header="realTimeI18n('frequency','刷新频率')">
                <template #extra >
                    <span class="checkbox-slot" @click.stop="">
                        <a-switch size="small" v-model:checked="config.advancedConf.refreshConfig.isRefresh"  ></a-switch>
                    </span>
                </template>
				<a-row v-show="config.advancedConf.refreshConfig.isRefresh">
					<a-col :span="12">
						<a-form-item>
							<template #label>
								{{realTimeI18n('timeRefresh','时间刷新间隔')}}
								<a-tooltip>
									<template #title>
                    <span style="width:500px;">
                    {{realTimeI18n('note','注意：时间刷新间隔需重新加载页面才生效,设计界面无法实时生效!')}}
                    </span>
									</template>
								<rx-icon-show icon="icon-lineicon-test35"/>
								</a-tooltip>
							</template>
							<div style="display: flex">
								<a-input-number style="flex: 1;margin-right: 5px" :min="0" v-model:value="config.advancedConf.refreshConfig.interval"></a-input-number>
								<a-select style="flex: 1" v-model:value="config.advancedConf.refreshConfig.unit">
									<a-select-option value="minute">{{realTimeI18n('minutes','分钟')}}</a-select-option>
									<a-select-option value="second">{{realTimeI18n('seconds','秒')}}</a-select-option>
								</a-select>
							</div>
						</a-form-item>
					</a-col>
				</a-row>
			</a-collapse-panel>
		</a-collapse>
	</div>
</template>

<script>
export default {
	name: "refresh-config",
	inject:{
		config:{
			default:()=>{
				return {};
			}
		}
	},
	data() {
		return {
			refreshConfig:{
				isRefresh:false,
				interval:5,
				unit:"minute"
			}
		}
	},
	created() {
		if(!this.config.advancedConf.refreshConfig){
            this.config.advancedConf["refreshConfig"]=this.refreshConfig;
		}
	},
	methods:{
		realTimeI18n(name,text,key){
			return this.$ti18(name,text,"realTimeLang",key);
		},
	}
}
</script>

<style scoped>

</style>
